<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form ref="info" :model="data" :rules="rules" :label-width="100">
        <FormItem :label="$t('3XCbmVH_U3ZYTtc5eh9SZ')" prop="name">
          <Input v-model="data.name" />
        </FormItem>
        <FormItem :label="$t('fbdPN8xjGYAFkNMRHtRAO')" prop="type">
          <Input v-model="data.type" />
        </FormItem>
        <FormItem :label="$t('f8fUbKa5UIsjFtrjAbJvl')" prop="address">
          <Input v-model="data.address" />
        </FormItem>
        <FormItem :label="$t('Ovm8rzDQz5r0XPSBLWwXr')" prop="tel1">
          <Input v-model="data.tel1" />
        </FormItem>
        <FormItem :label="$t('qC0-FwdnPgSlDRAnzn7fz')" prop="person">
          <Input v-model="data.person" />
        </FormItem>
        <FormItem :label="$t('Z3QUjt1RMrp5AauCPUgXg')">
          <div v-if="data.pictures" class="upload-list">
            <img :src="data.pictures" />
            <div class="upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
              <Icon
                type="ios-trash-outline"
                @click.native="handleRemove()"
              ></Icon>
            </div>
          </div>
          <Upload
            v-else
            action=""
            :before-upload="beforeUploadHandler"
            type="drag"
            style="display: inline-block;width:58px;"
          >
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal
            :title="$t('senBoLp0k9Y71jACExLPb')"
            v-model="bigImgShow"
            :styles="{ width: '400px', height: '500px' }"
            footer-hide
          >
            <img :src="data.pictures" style="width: 100%;height:100%" />
          </Modal>
        </FormItem>
        <FormItem :label="$t('R50mHX0LambJk39x8cmq6')">
          <Input
            v-model="data.remark"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
          <Button v-if="inModal" style="margin-left: 8px" @click="close"
            >{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button
          >
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import { addAgent, updateAgent } from '@/api/data2'
import vuescroll from 'vuescroll'

export default {
  name: 'agent_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    rules: Object,
    status: String,
    inModal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      bigImgShow: false,
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      }
    }
  },
  watch: {
    bigImgShow (val) {
      if (val) {
        this.$emit('close')
      } else {
        this.$emit('open')
      }
    }
  },
  methods: {
    beforeUploadHandler (file) {
      // this.data.pictures = file
      console.log('============= file is:', file)
      // 通过FileReader把File转化为base64
      const reader = new FileReader()
      // 读出 base64
      reader.readAsDataURL(file)
      reader.onloadend = () => {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        this.data.pictures = reader.result
      }
      return false
    },
    handleView () {
      this.bigImgShow = true
    },
    handleRemove () {
      this.data.pictures = ''
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const { code, data, desc } =
            this.status === 'new'
              ? await addAgent({ ...this.data })
              : await updateAgent({ ...this.data })
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        }
      })
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>
